<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
	<head>
		<title>Card Vault</title>
		<link href="<c:url value="/resources/css/normalize.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/style.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/validation.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/selectbox.css"/>" rel="stylesheet" type="text/css" media="screen"/>
		<script src="<c:url value="/resources/js/jquery-1.8.3.min.js" />"></script>
		<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
		<script src="<c:url value="/resources/js/scripts.js" />"></script>
		<script src="<c:url value="/resources/js/jquery.selectbox.min.js" />"></script>
		<script type="text/javascript">
			var context = '${pageContext.request.contextPath}';
			$(function() {
				$('select').selectbox();
			});
		</script>
	</head>
    <body>
    	<div id="wrapper">
        	<div class="heading">Card Vault</div>
        	<div>Enter your details here, chose wich cards you`d like to protect 
        		 and take control of the security of your finances today</div>
	        <br>
        	<form:form class="form-horizontal form-horizontal_centered" method="POST"
        		  	   action="${pageContext.request.contextPath}/user/registration" commandName="user">
				<div class="control-group">
			    	<label class="control-label" for="Name">Name<br><small>(6 - 20)</small></label>
			    	<div class="controls">
			      		<input type="text" name="Name" id="Name">
			    	</div>
			  	</div>
			  	<div class="control-group">
				    <label class="control-label" for="id">ID Number<br><small>(xxxx)</small></label>
				    <div class="controls">
				    	<input type="text" name="id" id="id" value="${userID}" readonly>
				    </div>
			  	</div>
			  	<div class="control-group">
				    <label class="control-label" for="Password">Password<br><small>(6 - 20)</small></label>
				    <div class="controls">
						<input type="password" name="Password" id="Password">
			    	</div>
			  	</div>
			  	<div class="control-group">
				    <label class="control-label" for="CellNumber">Cell Number<br><small>(xxx-xxx-xx-xx)</small></label>
				    <div class="controls">
						<input type="text" name="CellNumber" id="CellNumber">
			    	</div>
			  	</div>
			  	<div id="creditCards">
				  	<div class="control-group">
					    <label class="control-label" for="CardType">Card type</label>
					    <div class="controls">
					    	<select id="CardType">
					    		<!-- <option selected="selected" disabled="disabled">CardType</option> -->
								<option value="1">Visa</option>
								<option value="2">Mastercard</option>
								<option value="3">AmericanExpress</option>
								<option value="4">Edgars</option>
								<option value="5">BP</option>
							</select>
					    	<a id="addCard" class="btn"><i class="icon-plus"></i></a>
				    	</div>
				  	</div>
				  	<div class="control-group">
				    	<label class="control-label" for="CardNumber">Card Number
				    					<br><small>(xxxx-xxxx-xxxx-xxxx)</small></label>
				    	<div class="controls">
				      		<input type="text" name="CardNumber" id="CardNumber">
				    	</div>
				  	</div>
			  	</div>
			  	<div id="addedCards"></div>
			  	<div class="control-group">
				    <div class="controls">
						<button type="submit" id="send" class="btn submit_btn">Register</button>
			    	</div>
			  	</div>
			</form:form>
			<div class="fixed_block"> 
				<div id="fixed">
					<div class="mainview" align="center">
						<jsp:include page="service/fixed_block.jsp"></jsp:include>
					</div>
				</div> 
			</div>
        </div>
        <script type="text/javascript" src="<c:url value="/resources/js/validation.js" />"></script>
    </body>
</html>